<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- jQuery 2.2.3 -->
<script src="${APP_PATH }/jquery/jquery-2.2.3.min.js"></script>
<link href="${APP_PATH }/assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet"
	href="${APP_PATH }/assets/font-awesome-4.7.0/css/font-awesome.min.css" />
<!-- Ionicons -->
<link rel="stylesheet" href="${APP_PATH }/assets/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="${APP_PATH }/assets/dist/css/AdminLTE.min.css">
<link rel="stylesheet"
	href="${APP_PATH }/assets/dist/css/skins/skin-blue.min.css">
<script type="text/javascript" src="${APP_PATH }/assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="${APP_PATH }/assets/dist/js/app.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
    
	<!-- 员工修改的模态框 -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title">员工修改</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
			  <div class="form-group">
			    <label class="col-sm-2 control-label">员工姓名</label>
			    <div class="col-sm-10">
			      	<p class="form-control-static" id="empName_update_static"></p>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-10">
			      <label class="radio-inline">
					  <input type="radio" name="sex" value="男" id="gender1_update_input"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="sex" value="女" id="gender2_update_input"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">QQ</label>
			    <div class="col-sm-10">
			      <input type="text" name="qq" class="form-control" id="qq_update_input" placeholder="qq号码">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">电话</label>
			    <div class="col-sm-10">
			      <input type="text" name="phone" class="form-control" id="phone_update_input" placeholder="联系电话">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">所属部门</label>
			    <div class="col-sm-4">
			    	<!-- 部门提交部门id即可 -->
			      <select class="form-control" id="dept_select" name=departId>
			      </select>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<!-- 员工添加的模态框 -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
	      </div>
	      <div class="modal-body">
	        <form class="form-horizontal">
			  <div class="form-group">
			    <label class="col-sm-2 control-label">员工姓名</label>
			    <div class="col-sm-10">
			      <input type="text" name="realName" class="form-control" id="empName_add_input" placeholder="请真实填写员工的身份证姓名!">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">性别</label>
			    <div class="col-sm-10">
			      <label class="radio-inline">
					  <input type="radio" name="sex" id="gender1_add_input" value="男"> 男
					</label>
					<label class="radio-inline">
					  <input type="radio" name="sex" id="gender2_add_input" value="女"> 女
					</label>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">QQ</label>
			    <div class="col-sm-10">
			      <input type="text" name="qq" class="form-control" id="qq_add_input" placeholder="请填写员工的QQ号码!">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  <div class="form-group">
			    <label class="col-sm-2 control-label">电话</label>
			    <div class="col-sm-10">
			      <input type="text" name="phone" class="form-control" id="phone_add_input" placeholder="请填写员工的常用手机号码!">
			      <span class="help-block"></span>
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">所属部门</label>
			    <div class="col-sm-4">
			    	<!-- 部门提交部门id即可 -->
			      <select class="form-control" id="dept_select" name="departId">
			      </select>
			    </div>
			  </div>
			</form>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>


	<div class="wrapper">
		<!-- Main Header -->
		<header class="main-header">

			<!-- Logo -->
			<a href="" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
				<span class="logo-mini"></span> <!-- logo for regular state and mobile devices -->
				<span class="logo-lg">员工权限管理系统</span>
			</a>

			<!-- Header Navbar -->
			<nav class="navbar navbar-static-top" role="navigation">
				<!-- Sidebar toggle button-->
				<a href="#" class="sidebar-toggle" data-toggle="offcanvas"
					role="button"> <span class="sr-only">Toggle navigation</span>
				</a>
					
				
			</nav>
		</header>
		<!-- Left side column. contains the logo and sidebar -->
		<aside class="main-sidebar">

			<!-- sidebar: style can be found in sidebar.less -->
			<section class="sidebar">

				<!-- Sidebar user panel (optional) -->
				<div class="user-panel">
					<div class="pull-left info">
						<p class="user_name"></p>
						<!-- Status -->
						<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
					</div>
				</div>


				<!-- Sidebar Menu -->
				<ul class="sidebar-menu">
                    
                    <li><a href=""><i class="fa fa-home"></i>&nbsp;首页</a></li>
                    
                    <li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>我的考勤</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="${APP_PATH }/attendController/goAttendInfo">打卡记录</a></li>
							<li><a href="">补签记录</a></li>
							<li><a href="">待办补签</a></li>
						</ul></li>
					
					<!-- Optionally, you can add icons to the links -->
					<li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>员工管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="">员工信息</a></li>
							<li><a href="">员工考勤</a></li>
						</ul></li>
						
					<li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>部门管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="">部门信息</a></li>
						</ul></li>
				    
			       <li class="treeview"><a href="#"><i class="fa fa-link"></i>
							<span>数据管理</span> <span class="pull-right-container"> <i
								class="fa fa-angle-left pull-right"></i>
						</span> </a>
						<ul class="treeview-menu">
							<li><a href="">会话管理</a></li>
							<li><a href="">日志记录</a></li>
						</ul></li>
					
				</ul>
				<!-- /.sidebar-menu -->
			</section>
			<!-- /.sidebar -->
		</aside>
        
        <div class="content-wrapper">
          
          <!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-10">
				<button id="emp_add_modal_btn" class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
        
          <div class="row">
			<div class="col-md-12">
				<table class="table table-bordered" id="emps_table">
				  <thead>
					<tr>
						<th>员工ID</th>
						<th>员工姓名</th>
						<th>性别</th>
						<th>QQ</th>
						<th>电话</th>
						<th>所属部门</th>
						<th>操作</th>
					</tr>
				  </thead>
				  <tbody>
				  
				  </tbody>
				</table>
			</div>
		</div>
		
	    <!-- 显示分页信息 -->
		<div class="row">
			<!--分页文字信息  -->
			<div class="col-md-6" id="page_info_area"></div>
			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area">
				
			</div>
		</div>

	</div>
			
		</div>
		<!-- /.content-wrapper -->

		<!-- Main Footer -->
		<footer class="main-footer">
			<strong>Copyright &copy; 2016 <a href="#">员工权限管理系统</a>.
			</strong> All rights reserved.
		</footer>

	</div>
	
	<script type="text/javascript">
   //查出所有员工信息并且显示在列表下面
   //1.页面加载完成以后,直接去发送ajax请求,要到分页数据
     $(function(){
    	 //去首页
     	 to_page(1);
        });
     
     function to_page(pn){
    	 $.ajax({
    		 url:"${APP_PATH}/employeeController/emps",
    		 data:"pn="+pn,
    		 type:"GET",
    		 success:function(result){
    		    //console.log(result);
    		    //1.解析并显示员工数据
    		    build_emps_table(result);
    		    //2.解析并显示分页信息
    		    build_page_info(result);
    		    //3.解析分页条信息
    		    build_page_nav(result);
    		 }
    	   }); 
     }
   
     function build_emps_table(result){
    	 //清空table表格
    	 $("#emps_table tbody").empty();
    	 var emps = result.extend.pageInfo.list;
    	 $.each(emps,function(index,item){
    		 var empId = $("<td></td>").append(item.empId);
             var realName = $("<td></td>").append(item.realName);
             var sex = $("<td></td>").append(item.sex);
             var qq = $("<td></td>").append(item.qq);
             var phone = $("<td></td>").append(item.phone);
             var departName = $("<td></td>").append(item.department.departName);
             
             var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                 .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
             editBtn.attr("edit-id",item.empId);
             var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
				.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
             //为删除按钮添加一个自定义的属性来表示当前删除的员工id
             delBtn.attr("del-id",item.empId);
             var TdBtn = $("<td></td>").append(editBtn).append(delBtn);
             //append方法执行完成以后还是返回原来的元素
    		 $("<tr></tr>").append(empId)
    		 .append(realName)
    		 .append(sex)
    		 .append(qq)
    		 .append(phone)
    		 .append(departName)
    		 .append(TdBtn)
    		 .appendTo("#emps_table tbody");
    	 });
     }
     
     //解析显示分页信息
     function build_page_info(result){
    	 $("#page_info_area").empty();
    	 $("#page_info_area").append("当前"+result.extend.pageInfo.pageNum+"页,总"+
    			 result.extend.pageInfo.pages+"页,总"+
    			 result.extend.pageInfo.total+"条记录");
	     totalRecord = result.extend.pageInfo.total;
    	 currentPage = result.extend.pageInfo.pageNum;
     }
     
     //解析显示分页条
     function build_page_nav(result){
    	 $("#page_nav_area").empty();
         var ul = $("<ul></ul>").addClass("pagination");
    	 var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
    	 var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
		 
    	 if(result.extend.pageInfo.hasPreviousPage == false){
    		 firstPage.addClass("disabled");
    		 prePageLi.addClass("disabled");
    	 }else{
    		 //为元素添加点击翻页的事件
    		 firstPage.click(function(){
    			to_page(1); 
    		 });
    		 prePageLi.click(function(){
    			to_page(result.extend.pageInfo.pageNum-1); 
    		 });
    	 }
    	 
    	 var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
    	 var lastPage = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
       
    	 if(result.extend.pageInfo.hasNextPage == false){
    		 nextPageLi.addClass("disabled");
    		 lastPage.addClass("disabled");
    	 }else{
    		 //为元素添加点击翻页事件
    		 nextPageLi.click(function(){
    			to_page(result.extend.pageInfo.pageNum+1); 
    		 });
    		 lastPage.click(function(){
    			to_page(result.extend.pageInfo.pages); 
    		 });
    	 }
    	 
    	 ul.append(firstPage).append(prePageLi);
    	 //1 2 3
         $.each(result.extend.pageInfo.navigatepageNums,function(index,item){
        	var numLi = $("<li></li>").append($("<a></a>").append(item)); 
        	if (result.extend.pageInfo.pageNum == item) {
				numLi.addClass("active");
			}
        	numLi.click(function(){
        		to_page(item);
        	});
        	ul.append(numLi);
         });
    	 //添加下一页和末页的提示
    	 ul.append(nextPageLi).append(lastPage);
    	 //把ul加入到nav
    	 var navEle = $("<nav></nav>").append(ul);
    	 navEle.appendTo("#page_nav_area");
     }   
     
         //单个删除
         $(document).on("click",".delete_btn",function(){
        	 //1.弹出是否确认删除对话框
        	 //alert($(this).parents("tr").find("td:eq(1)").text());
             var empName = $(this).parents("tr").find("td:eq(1)").text();
             var empId = $(this).attr("del-id");
             if(confirm("确认删除【"+empName+"】吗?")){
            	//确认,发送ajax请求删除即可
            	$.ajax({
            		url:"${APP_PATH}/employeeController/emps/"+empId,
            		type:"DELETE",
            		success:function(result){
            			alert(result.msg);
            			to_page(currentPage);
            		}
            	});
             }
         });
         
       //点击新增按钮弹出模态框。
 		$("#emp_add_modal_btn").click(function(){
 			//s$("")[0].reset();
 			//发送ajax请求，查出部门信息，显示在下拉列表中
 			getDepts("#empAddModal select");
 			//弹出模态框
 			$("#empAddModal").modal({
 				backdrop:"static"
 			});
 		});
       
 		//点击保存，保存员工。
		$("#emp_save_btn").click(function(){
			//2、发送ajax请求保存员工
			//alert($("#empAddModal form").serialize());
			$.ajax({
				url:"${APP_PATH}/employeeController/emp1",
				type:"POST",
				data:$("#empAddModal form").serialize(),
				success:function(result){
					alert(result.msg);
					$("#myModal").modal('hide');
					//2、来到最后一页，显示刚才保存的数据
					//发送ajax请求显示最后一页数据即可
					to_page(totalRecord);
				}
			});
		});
         
        //清空表单样式及内容
 		function reset_form(ele){
 			$(ele)[0].reset();
 			//清空表单样式
 			$(ele).find("*").removeClass("has-error has-success");
 			$(ele).find(".help-block").text("");
 		}
         
         //获取员工所属部门信息
         function getDepts(ele){
        	 //清空之前下拉列表的值
        	 $(ele).empty();
        	 $.ajax({
        		 url:"${APP_PATH}/departmentController/getDepts",
        		 type:"GET",
        		 success:function(result){
        			 //{"code":100,"msg":"处理成功！",
        				// "extend":{"depts":[{"departId":1,"departName":"开发部门"},{"departId":2,"departName":"测试部门"},{"departId":3,"departName":"调查部门"}]}}
					//console.log(result);
					//显示部门信息在下拉列表中
					//$("#empAddModal select").append("")
        			$.each(result.extend.depts,function(){
        			   var optionEle = $("<option></option>").append(this.departName).attr("value",this.departId);
        			   optionEle.appendTo(ele);
        		    });
        		 }
        	 });      	 
         }
         
         //点击编辑按钮生成模态框
         $(document).on("click",".edit_btn",function(){
        	 
        	//1、查出部门信息，并显示部门列表
 			getDepts("#empUpdateModal select");
        	 
        	 //查出员工信息 显示员工信息
        	 getEmp($(this).attr("edit-id"));
        	 
        	//3、把员工的id传递给模态框的更新按钮
 			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
        	 
        	 $("#empUpdateModal").modal({
        		 backdrop : "static"
        	 });
         });
     
         //根据员工id获取信息
         function getEmp(id){
        	 $.ajax({
        		 url :"${APP_PATH}/employeeController/emps/"+id,
        		 type :"GET",
        		 success :function(result){
        			 var empData = result.extend.emp;
        			 $("#empName_update_static").text(empData.realName);
        			 $("#empUpdateModal input[name=sex]").val([empData.sex]);
        			 $("#qq_update_input").val(empData.qq);
        			 $("#phone_update_input").val(empData.phone);
        			 $("#empUpdateModal select").val(empData.departId);
        		 }
        	 });
         }
         
       //点击更新，更新员工信息
 		$("#emp_update_btn").click(function(){
 			//验证邮箱是否合法
 			//1、校验邮箱信息
 			
 			//2、发送ajax请求保存更新的员工数据
 			$.ajax({
 				url:"${APP_PATH}/employeeController/emps/"+$(this).attr("edit-id"),
 				type:"PUT",
 				data:$("#empUpdateModal form").serialize(),
 				success:function(result){
 					alert(result.msg);
 					//1、关闭对话框
 					$("#empUpdateModal").modal("hide");
 					//2、回到本页面
 					to_page(currentPage);
 				}
 			});
 		});
         
</script>

</body>	
</html>